<script setup lang='ts'>
import { ref } from 'vue';
type ToyItem = {
    id: number;
    name: string;
    count: number;
    price: number;
}
// Array<ToyItem> ToyItem[] 都是数组类型
const list = ref<ToyItem[]>([
    {
        id: 1,
        name: '芭比娃娃',
        count: 1,
        price: 288
    },
    {
        id: 2,
        name: '变形金刚',
        count: 5,
        price: 399
    },
    {
        id: 3,
        name: '弹弓',
        count: 3,
        price: 5
    }
])

const delToy = (id: number) => {
    if (confirm(("确定删除吗？"))) {
        return list.value.filter(item => item.id !== id)
    }
}
</script>

<template>
    <h1>礼物清单</h1>
    <table border="2">
        <thead>
            <th>玩具名称</th>
            <th>玩具数量</th>
            <th>玩具价格</th>
            <th>操作</th>
        </thead>
        <tbody>
            <!-- 一行一行的 -->
            <tr v-for="item in list" :key="item.id">
                <td align="center" width="200px">{{ item.name }}</td>
                <td align="center" width="200px">{{ item.count }}</td>
                <td align="center" width="200px">{{ item.price }}</td>
                <td align="center" width="200px"><a @click.prevent="delToy(item.id)">删除</a></td>
            </tr>
        </tbody>
    </table>
    <p>当前总数量：{{ }}当前总价格：{{ }}</p>
</template>

<style scoped></style>